<template>
  <div id="all">
    <div id="chart_walk1">
    </div>
    <div id="table_1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>走步排名</span>
        </div>
        <div v-for="(item,key,i) in tableData" :key="i" class="text item">
          {{'第'+(key+1)+'名'}}<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
         {{item.userName}}              {{item.walkTotalNum}}
        </div>
      </el-card>
    </div>
    <div id="chart_walk2">
    </div>
    <div id="chart_walk3">

    </div>
  </div>
</template>

<script>
  import *as echarts from 'echarts'

  export default {
    name: 'WalkAnalysis',
    data() {
      return {
        tableData:[],
        option: {
          title: {
            text: '本周每人每日平均走步',
            textStyle: {
              fontSize: 20,
              color: ['#6d6d6d'],
              fontWeight: 'normal'
            },
          },
          color: ['#2588ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '步数',
              type: 'line',
              barWidth: '60%',
              data: [],
            }
          ]
        },
        option2: {
          title: {
            text: '平均走步步数分布',
            textStyle: {
              fontSize: 20,
              color: ['#6d6d6d'],
              fontWeight: 'normal'
            },
            subtext: '近一周',
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },
          legend: {
            top: '10%',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  position: 'inner',
                  formatter: '{d}%',
                  textStyle: {
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: 18
                  }
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                normal: {
                  show: true,
                }
              },
              data: []
            },
          ]
        },
        option3: {
          title: {
            text: '各年龄段走步分布',
            textStyle: {
              fontSize: 20,
              color: ['#6d6d6d'],
              fontWeight: 'normal'
            },
            subtext: '近一周',
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },
          legend: {
            top: '10%',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  position: 'inner',
                  formatter: '{d}%',
                  textStyle: {
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: 18
                  }
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                normal: {
                  show: true,
                }
              },
              data: [
                {value: 1048, name: '<18'},
                {value: 735, name: '18-25'},
                {value: 580, name: '25-40'},
                {value: 484, name: '40-60'},
                {value: 300, name: '>60'}
              ]
            },
          ]
        },
      }
    },
    created() {
      this.getWalkDataList();
      //体重占比
      this.getWalkList2();
      this.getWalkTop();
    },
    methods: {
      //时间格式化
      formatDate:function(row, column) {
        // 获取单元格数据
        let data = row[column.property];
        // if (this.$MyComm.isEmpty(data)) {
        // 	return ''
        // }
        let dt = new Date(data);
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      },
   /*   dateformat(data){
        let dt = new Date(data);
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      },*/
      draw(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('chart_walk1'));
        myChart.setOption(this.option);
      },
      draw2(){
        let myChart2 = echarts.init(document.getElementById('chart_walk2'));
        myChart2.setOption(this.option2);
      },
      draw3(){
        let myChart3 = echarts.init(document.getElementById('chart_walk3'));
        myChart3.setOption(this.option3);
      },
      getWalkDataList(){
        this.axios.get('micro-sports-server/walk/avgWalk',{
          params:{

          }
        }).then(res => {
          let arr = res.data.data;
          let arr1 = new Array(arr.length);
          let arr2 = new Array(arr.length);
          arr.forEach(function(value,index){
            let dt = new Date(value.time);
            let times = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
            arr1[index]=times;
            arr2[index]=value.avgWalkNum;
          });
          console.log(arr1);
          console.log(arr2);

          this.option.series[0].data = arr2;
          this.option.xAxis[0].data = arr1;

        });
      },
      getWalkList2(){
        this.axios.get('micro-sports-server/walk/WalkPercentage',{
          params:{

          }
        }).then(res => {
          /*  let arr = res.data.data;
            let arr1 = new Array(arr.length);
            let arr2 = new Array(arr.length);
            arr.forEach(function(value,index){
              arr1[index]=value.ageType;
              arr2[index]=value.avgWeight;
            });
            console.log(arr1);
            console.log(arr2);*/
          console.log(res.data);
          let tableData = res.data.data;
          for(var key in tableData){
            this.option2.series[0].data.push({name:tableData[key].walkType,value:tableData[key].walkCount});
          }
          /*          this.option.series[0].data = arr2;
                    this.option.xAxis[0].data = arr1;*/
        });
      },
      getWalkTop(){
        this.axios.get('micro-sports-server/walk/walkTop',{
          params:{

          }
        }).then(res => {
          console.log(res.data);
          this.tableData = res.data.data;
        });
      },
    },
    mounted() {
      this.draw();
      this.draw2();
      this.draw3();
    },
    watch: {
      option: {
        handler(newValue, oldValue) {
          this.draw();
        },
        deep: true
      },
      option2: {
        handler(newValue, oldValue) {
          this.draw2();
        },
        deep: true
      },
      option3: {
        handler(newValue, oldValue) {
          this.draw3();
        },
        deep: true
      },
    }
  }
</script>

<style scoped>

  #chart_walk1{
    width: 50%;
    height: 500px;
    margin-left: 20px;
    float: left;
  }
  #table_1{
    width: 35%;
    height: 500px;
    margin-left: 20px;
    float: left;
  }

  #chart_walk2{
    width: 50%;
    height: 400px;
    margin-left: 20px;
    float: left;
    margin-top: 20px;
  }
  #chart_walk3{
    width: 39%;
    height: 400px;
    margin-left: 20px;
    float: left;
    margin-top: 20px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: 100%;
  }
</style>
